﻿<%@ taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ page import="com.cxx.purchasecharge.component.utils.MessageProperties"%>
<%@ page import="com.cxx.purchasecharge.component.utils.ComponentConstants"%>

<script type='text/javascript' src="<c:url value='/common/js/highcharts.js' />"></script>
<script type='text/javascript' src="<c:url value='/common/js/exporting.js' />"></script>
<script type='text/javascript' src="<c:url value='/common/js/no-data-to-display.js' />"></script>
<script type='text/javascript' src="<c:url value='/common/js/highcharts-3d.js' />"></script>
<script type="text/javascript">
	$(function () {
		Highcharts.setOptions({
			lang: {
				months: ['一月', '二月', '三月', '四月', '五月', '六月',  '七月', '八月', '九月',
				 '十月', '十一月', '十二月'],
				weekdays: ['星期天', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
				downloadJPEG: '下载成JPEG图像',
				downloadPDF: '下载成PDF文档',
				downloadPNG: '下载成PNG图像',
				downloadSVG: '下载成SVG矢量图像',
				printChart: '打印图表',
				loading: '加载中...',
				contextButtonTitle: '图表上下文菜单'
			}
		});

		$(function () {
		    $('#orderSalesPerMonthContainer').highcharts({
		        title: {
		            text: '<spring:message code="report.orderSalesLinePerMonth" />'
		        },

				legend: {
					align: 'right',
					verticalAlign: 'top',
					x: 0,
					y: 100
				},

		        xAxis: {
		            categories: Highcharts.getOptions().lang.months
		        },
				yAxis:{
					title:{
						text:'<spring:message code="report.money" />'
					},
					plotLines: [{
						value: 0,
						width: 1,
						color: '#808080'
					}]
				},

		        series: [{
					name: new Date().getFullYear(),
		            data: []
		        }],
				credits:{
					text:'<%=MessageProperties.getConfig (ComponentConstants.SW_NAME) %>',               // 显示的文字
					href:'<%=MessageProperties.getConfig (ComponentConstants.ABOUT_US) %>',   // 链接地址
					style: {                            // 样式设置
						fontSize: '16px'
					}
				}
		    });
			
			$('#orderProfitPerMonthContainer').highcharts({
				chart: {
					type: 'column',
					margin: 75,
					options3d: {
						enabled: true,
						alpha: 10,
						beta: 25,
						depth: 70
					}
				},
				title: {
		            text: '<spring:message code="report.orderProfitColumnPerMonth" />'
		        },

				plotOptions: {
					column: {
						depth: 25
					}
				},
				xAxis: {
					categories: Highcharts.getOptions().lang.months
				},
				yAxis: {
					title:{
						text:'<spring:message code="report.money" />'
					},
					opposite: true
				},
				series: [{
					name: new Date().getFullYear(),
		            data: []
		        }],
				credits:{
					text:'<%=MessageProperties.getConfig (ComponentConstants.SW_NAME) %>',               // 显示的文字
					href:'<%=MessageProperties.getConfig (ComponentConstants.ABOUT_US) %>',   // 链接地址
					style: {                            // 样式设置
						fontSize: '16px'
					}
				}
			});
		});
		
		loadOrderReport();
	});
	
	var loadOrderReport = function() 
	{
		searchOrderSales('<c:url value='/reportIndex/generateLineForOrderVolumePerMonth.html' />');
		searchOrderProfit('<c:url value='/reportIndex/generateLineForOrderProfitPerMonth.html' />');
	}
	
	function searchOrderSales(requestUrl) 
	{
		$.post(requestUrl, {}, 
			function(result) 
			{
				//console.log(result);
				var chart = $('#orderSalesPerMonthContainer').highcharts();
				chart.showLoading();
				chart.hideLoading();
				chart.series[0].setData(result[0].data);
			}, 
		'json');
	}
	function searchOrderProfit(requestUrl) 
	{
		$.post(requestUrl, {}, 
			function(result) 
			{
				//console.log(result);
				var chart2 = $('#orderProfitPerMonthContainer').highcharts();
				chart2.showLoading();
				chart2.hideLoading();
				chart2.series[0].setData(result[0].data);
			}, 
		'json');
	}
</script>

<div id="goodsReportCriteria">
	<form id="reportForm" action="">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-reload" plain="true" title="" onclick="loadOrderReport()"></a>
	</form>
</div>

<div style="width:100%;">
	<div style="margin:0 auto;width:95%;height:450px;">
		<div id="orderSalesPerMonthContainer" style="float:left;min-width: 310px;width: 50%; height: 400px;"></div>
		<div id="orderProfitPerMonthContainer" style="float:left;min-width: 310px;width: 50%; height: 400px;"></div>
	</div>
</div>
